<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('菜单修改')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="menu-form">
                        <input id="id" name="id" type="hidden" th:value="${menu.id}"
                               class="ignore">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">上级菜单：</label>
                            <div class="col-sm-8">
                                <input id="pid" name="pid" class="hidden" th:value="${pid}">
                                <input id="pName" name="pName" class="form-control ignore"
                                       type="text" th:value="${pName}" readonly style="cursor: pointer;"
                                       onclick="openMenu()">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span
                                    class="wayn-required-span">*</span>菜单类型：</label>
                            <div class="col-sm-8">
                                <th:block th:each="dict : ${menuTypes}">
                                    <label class="radio-inline i-checks">
                                        <input type="radio" name="type" th:value="${dict.id}" th:checked="${#strings.toString(menu.type) == dict.id}" />
                                        [[${dict.text}]]
                                    </label>
                                </th:block>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span
                                    class="wayn-required-span">*</span>菜单名称：</label>
                            <div class="col-sm-8">
                                <input id="menuName" name="menuName" class="form-control"
                                       type="text" th:value="${menu.menuName }">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">链接地址：</label>
                            <div class="col-sm-8">
                                <input id="url" name="url" class="form-control" type="text"
                                       th:value="${menu.url }">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限标识：</label>
                            <div class="col-sm-8">
                                <input id="resource" name="resource" class="form-control"
                                       type="text" th:value="${menu.resource }">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序号：</label>
                            <div class="col-sm-8">
                                <input id="sort" name="sort" class="form-control" type="text"
                                       th:value="${menu.sort }">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图标：</label>
                            <div class="col-sm-6">
                                <input id="icon" name="icon" class="form-control" type="text"
                                       placeholder="例如：fa fa-circle-o" th:value="${menu.icon }">
                            </div>
                            <input id="ico-btn" class="btn btn-warning ignore" type="button"
                                   value="选择图标">
                        </div>


                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button id="save-button" type="submit" class="btn btn-primary">提 交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: common-js"/>
<script th:inline="javascript">
    var prefix = _ctx + "/system/menu";

    function validateRule() {
        var e = '<i class="fa fa-times-circle"></i> ';
        $("#menu-form").validate({
            debug: true,
            rules: {
                menuName: {
                    required: true
                },
                type: {
                    required: true
                }
            },
            messages: {
                menuName: {
                    required: e + "请输入菜单名"
                },
                type: {
                    required: e + "请选择菜单类型"
                }
            },
            ignore: ".ignore",
            focusCleanup: true,
            submitHandler: function () {
                update();
            }
        });
    }

    function update() {
        var config = {
            url: prefix + "/editSave",
            data: $('#menu-form').serialize(),
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data.code != 100) {
                    layer.alert(data.msg);
                } else {
                    parent.layer.msg(data.msg, {icon: 1});
                    parent.reload();
                    //关闭当前窗口
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);
                }
            },
            error: function (err) {
                console.log(err)
            }
        };
        $.ajax(config);
    }

    var openMenu = function () {
        layer.open({
            type: 2,
            title: "选择菜单",
            area: ['350px', '480px'],
            content: prefix + "/treeView"
        })
    };

    function loadMenu(pid, pName) {
        $("#pid").val(pid);
        $("#pName").val(pName);
    }

    $(function () {
        $("#ico-btn").click(function () {
            layer.open({
                type: 2,
                title: '图标列表',
                anim: 5,
                content: _ctx + '/system/menu/chooseIcon',
                area: ['480px', '90%'],
                success: function (layero, index) {
                    //var body = layer.getChildFrame('.ico-list', index);
                    //console.log(layero, index);
                }
            });
        });
        validateRule();
    })
</script>
</body>

</html>
